<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { User, Lock } from '@element-plus/icons-vue'
import { RegisterStudent } from '@/api/user'
import { ElMessage } from 'element-plus';
// 控制加载
let loading = ref(false)
// 表单绑定dom
let loginForms = ref();
//表单内容
let loginData = reactive({ username: "wind", password: "123456", checkPass: "" })
// 表单校验需要的配置对象
const validateName = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    }
    callback()
}
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    }
    callback()
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码!'))
    } else if (value !== loginData.password) {
        callback(new Error("再次输入的密码不相同!"))
    } else {
        callback()
    }
}
const rules = reactive({
    username: [{ validator: validateName, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }]
})

// 引入路由器
const router = useRouter()
const register = async () => {
    try {
        // 表单校验通过才能发请求
        await loginForms.value.validate();
        // 开始加载
        loading.value = true
        let result: any = await RegisterStudent(loginData);
        ElMessage.success("注册成功");
        router.replace('/login');//跳转到主页

    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}
</script>
<template>
    <div class="login_con">
        <div class="login_body">
            <h1 class="website-title">注册</h1>
            <el-form class="login_form" :model="loginData" :rules="rules" ref="loginForms">
                <el-form-item prop="username">
                    <el-input :prefix-icon="User" v-model="loginData.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" style="margin-top: 20px;">
                    <el-input type="password" :prefix-icon="Lock" v-model="loginData.password" show-password
                        placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item prop="checkPass" style="margin-top: 20px;">
                    <el-input type="password" :prefix-icon="Lock" v-model="loginData.checkPass" show-password
                        placeholder="请再次输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" type="primary" style="width: 100%;" @click="register">注册</el-button>
                </el-form-item>
                <span style="color: white;">返回<button type="button"
                        style="color: #409eff; background: transparent; border: none; cursor: pointer;"
                        @click="router.replace({ path: '/login' })">登录</button></span>
            </el-form>
        </div>
    </div>
</template>

<style scoped>
.login_con {
    background-image: url('http://localhost:8080/course/download/login.jpg');
    /* background-size: cover; */
    background-size: 100% 100%;
    /* 背景图适应并填充整个容器 */
    width: 100%;
    height: 100vh;
    display: flex;
    background-attachment: fixed;
    justify-content: center;
    align-items: center;
}

.login_body {
    background-color: rgba(0, 0, 0, 0.5);
    width: 45%;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.website-title {
    color: white;
    font-size: 24px;
    margin-bottom: 20px;

}

.login_form {
    width: 50%;
    padding: 20px;
}
</style>
